﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <li>
          <input type="checkbox" />
          <p>测试</p>
          <a href="javascript:;"></a>
        </li>
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <li>
          <input type="checkbox" checked />
          <p>吃饭</p>
          <a href="javascript:;"></a>
        </li>
      </ul>
    </section>
    <footer></footer>

    <script>
      // 获取元素
      const input = document.querySelector('[name="title"]')
      const todo = document.getElementById('todolist')
      const done = document.getElementById('donelist')
      const todocount = document.getElementById('todocount')
      const donecount = document.getElementById('donecount')
      load()

      // 绑定回车keyup事件
      input.addEventListener('keyup', function (e) {
        //敲下回车，将输入数据保存到数组
        if (e.keyCode === 13 && e.target.value) {
          // 提取本地的数据的数组，用变量接收
          let localList = getData()
          // 将输入的数据追加到变量
          localList.push(e.target.value)
          // 将变量重新存到本地
          saveData(localList)
          // 输入框清空
          e.target.value = ''
          // 重新加载页面
          load()
        }
      })

      // 读取本地的数据
      function getData() {
        let data = localStorage.getItem('todolist')
        // 如果本地有数据，就返回数据，没有就返回[]用来接收新输入的数据
        return data ? JSON.parse(data) : []
      }
      function getData1() {
        let data1 = localStorage.getItem('donelist')
        // 如果本地有数据，就返回数据，没有就返回[]用来接收新输入的数据
        return data1 ? JSON.parse(data1) : []
      }

      // 保存本地数据
      function saveData(data) {
        localStorage.setItem('todolist', JSON.stringify(data))
      }
      function doneData(doneData) {
        localStorage.setItem('donelist', JSON.stringify(doneData))
      }

      // 正在进行
      // 事件委托，点击勾选或删除
      todo.addEventListener('click', function (e) {
        // console.log(e.target.nextElementSibling.innerText)
        // 提取本地的数据的数组，用变量接收
        let localList = getData()
        let localList1 = getData1()
        // 将输入的数据追加到变量
        if (e.target.tagName === 'INPUT') {
          const doneThing = e.target.nextElementSibling.innerText
          // console.log(doneThing)
          localList1.push(doneThing)
          // console.log(localList)
          localList.splice(localList.indexOf(doneThing), 1)
          saveData(localList)
          doneData(localList1)
        } else if (e.target.tagName === 'A') {
          const delThing = e.target.previousElementSibling.innerText
          // console.log(delThing)
          // console.log(getData())

          // 获取索引
          // console.log(localList.indexOf(delThing));
          localList.splice(localList.indexOf(delThing), 1)
          saveData(localList)
        }
        load()
      })

      // 已经完成
      // 事件委托，点击勾选或删除
      done.addEventListener('click', function (e) {
        // console.log(e.target.nextElementSibling.innerText)
        // 提取本地的数据的数组，用变量接收
        let localList = getData()
        let localList1 = getData1()
        // 将输入的数据追加到变量
        if (e.target.tagName === 'INPUT') {
          const doneThing = e.target.nextElementSibling.innerText
          // console.log(doneThing)
          localList.push(doneThing)
          // console.log(localList)
          localList1.splice(localList1.indexOf(doneThing), 1)
          saveData(localList)
          doneData(localList1)
        } else if (e.target.tagName === 'A') {
          const delThing = e.target.previousElementSibling.innerText
          // console.log(delThing)
          localList1.splice(localList1.indexOf(delThing), 1)
          doneData(localList1)
        }
        load()
      })

      // 渲染页面
      function load() {
        // 读取本地的数据
        let data = getData()
        let data1 = getData1()
        // 正在进行的
        todo.innerHTML = data
          .map((item) => {
            return `
          <li>
          <input type="checkbox" />
          <p>${item}</p>
          <a href="javascript:;"></a>
        </li>
          `
          })
          .join('')

        // 已完成的
        done.innerHTML = data1
          .map((item) => {
            return `
            <li>
            <input type="checkbox" checked/>
          <p>${item}</p>
          <a href="javascript:;"></a>
          </li>
            `
          })
          .join('')
        // 数量角标
        todocount.innerText = getData().length
        donecount.innerText = getData1().length
      }
    </script>
  </body>
</html>
